<template>
	<div class="img_manage">
		<el-row style="margin-bottom: 8px;">
			<el-col>
				<el-button type="danger" icon="delete" @click="deleteAll">批量删除</el-button>
				<el-button type="primary" icon="refresh" @click="reload">刷新</el-button>
			</el-col>
		</el-row>
		<el-table :data="list" border style="width: 100%;" @selection-change="handleSelectionChange">
			<el-table-column type="selection"/>
			<el-table-column type="index" label="#"/>
			<el-table-column label="图片" width="150" align="center">
				<template #default="scope">
					<el-image :src="`/api${scope.row.upload_image}`" :preview-src-list="[`/api${scope.row.upload_image}`]"  preview-teleported z-index="999"/>
				</template>
			</el-table-column>
			<el-table-column label="识别结果" align="center" prop="result_type">
				<template #default="scope">
					{{translate(scope.row.result_type)}}
				</template>
			</el-table-column>
			<el-table-column label="识别时间" align="center" prop="time">
				<template #default="scope">
					{{formatTime(scope.row.time)}}
				</template>
			</el-table-column>

			<el-table-column label="置信度" align="center" prop="confidence"/>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="danger" icon="delete" @click="deleteRecord(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div style="margin-top: 8px; display: flex; justify-content: flex-end;">
			<el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange"/>
		</div>
	</div>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue";
import {getImageRecognitionList, deleteImageRecognitionHistory} from '/@/api/image_recognition/hz-system-image-recognition-api'
import {ElMessage, ElMessageBox} from "element-plus";
import dayjs from "dayjs";
import {translate} from '/@/utils/translate'

const listQuery = reactive({
	page: 1,
	pageSize: 10,
})
const list = ref([])
const total = ref(0)
const getList = async ()=> {
	const res = await getImageRecognitionList(listQuery)
	list.value = res.data.record;
	total.value = res.data.total
}
getList()

const reload = ()=> {
	listQuery.page = 1
	listQuery.pageSize = 10
	getList()
}

const pageChange = page => {
	listQuery.page = page
	getList()
}

const deleteRecord = async (id)=> {
	await ElMessageBox.confirm(
		'确认删除该记录吗?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	const res = await deleteImageRecognitionHistory(id)
	ElMessage({
		type: res.code == 200 ? 'success' : 'error',
		message: res.code == 200 ? '删除成功!' : '发生错误，请联系管理员!',
		duration: 2000
	})
	getList()
}

const deleteAll = async () => {
	await ElMessageBox.confirm(
		'确认删除选中的记录吗?',
		'Warning',
		{
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	try{
		for (let id of deleteIds.value){
			await deleteImageRecognitionHistory(id)
		}
		ElMessage({
			type: 'success',
			message: `已成功删除${deleteIds.value.length}条记录!`,
			duration: 2000
		})
		getList()
	}catch (e){
		ElMessage({
			type: 'error',
			message: '发生错误，请联系管理员!',
			duration: 2000
		})
	}

}

const deleteIds = ref([])
const handleSelectionChange = async (val) => {
	deleteIds.value = val.map(item => item.id)
}

const formatTime = time => {
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
</script>
<style scoped lang="scss">

</style>
